<template>
  <div class="bg">
    <video autoplay loop muted>
      <source src="../../assets/video/bg.mp4" type="video/mp4" />
    </video>
  </div>
  <div class="main">
    <div class="login-panel">
      <div class="title">{{ title }}</div>
      <div class="form">
        <a-form
          ref="form"
          :model="formState"
          name="basic"
          :label-col="{ span: 4 }"
          autocomplete="off"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
        >
          <a-form-item label="用户名" name="account" :rules="[{ required: true, message: '请输入用户名' }]">
            <a-input v-model:value="formState.account" />
          </a-form-item>
          <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入密码' }]">
            <a-input-password v-model:value="formState.password" />
          </a-form-item>
          <a-form-item label="验证码" name="captcha">
            <!--  :rules="[{ required: true, message: '请输入验证码' }]"                     -->
            <a-input v-model:value="formState.captcha" />
          </a-form-item>
          <a-form-item name="remember" :wrapper-col="{ offset: 3, span: 24 }">
            <a-checkbox v-model:checked="remember">记住密码</a-checkbox>
          </a-form-item>
          <a-form-item :wrapper-col="{ offset: 6, span: 24 }">
            <a-button type="primary" html-type="submit" style="margin-right: 20px">登录 </a-button>
            <a-button type="primary" @click="handlerRegistry">注册</a-button>
          </a-form-item>
        </a-form>
        <img :src="captchaImg" @click="updateCaptcha" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { user, userLogin } from '../../entity/system/user'
import { useRouter } from 'vue-router'
import { captcha, getPermissionByName, getRoleById, getUserByName, login, registry } from '../../api/system/user'
import { getBlobImg } from '../../utils/file-util'
import { userStore } from '../../store'
import { findNavTree } from '../../api/system/menu'
import { menu } from '../../entity/system/menu'
import { message } from 'ant-design-vue'
let captchaImg = ref<any>(null)
const useStore = userStore()
const route = useRouter()
const title = import.meta.env.VITE_APP_TITLE
/**
 * 加载验证码
 */
const updateCaptcha = () => {
  captcha().then((res) => {
    captchaImg.value = getBlobImg(res as unknown as Blob)
  })
}
onMounted(() => {
  // 动态路由初始化
  useStore.setIsLoadingDynamicMenu(false)
  // 加载验证码
  updateCaptcha()
})

let formState = reactive<userLogin>({
  account: 'admin',
  captcha: '',
  password: 'admin',
})
let remember = ref<boolean>(false)

/**
 * 登录
 * @param values
 */
const onFinish = (values: any) => {
  login(values).then((res) => {
    initInfo(res)
  })
}
async function initInfo(res: any) {
  if (res.code == 500) {
    return
  }
  const data = res.data
  // 获取token信息
  await useStore.setToken(data.token)
  // 获取用户信息
  await getUserByName(data.name).then(async (res) => {
    await useStore.setUser(res.data)
    // 获取角色信息
    await getRoleById(useStore.getUser.id as string).then((res) => {
      useStore.setRole(res.data)
    })
  })
  // 获取权限信息
  await getPermissionByName(data.name).then((res) => {
    useStore.setPermission(res.data)
  })
  // 获取用户菜单
  await findNavTree(useStore.getUser.name as string).then((res) => {
    // 对菜单进行过滤
    // 存储菜单信息
    useStore.setMenu(res.data)
    useStore.setIsLoadingMenu(true)
  })
  console.log(useStore.getUser)
  // 跳转到首页
  route.push(useStore.getUser.userType == '1' ? '/home' : '/user/home')
}
const form = ref<any>(null)
function handlerRegistry() {
  if (form.value) {
    form.value
      .validate()
      .then((res: user) => {
        res.userType = '0'
        res.name = res.account
        res.status = 1
        registry(res).then((res) => {
          initInfo(res)
        })
      })
      .catch(() => {
        message.error('请输入所有必填项')
      })
  }
}

function onFinishFailed() {
  message.error('请输入所有必填项')
}
</script>

<style scoped lang="scss">
@import '@/assets/scss/mixin.scss';

.main {
  position: absolute;
  z-index: 999;
  right: 2%;
  width: 100%;
  height: 100%;
  background-size: cover;
  @include flexMixer(flex-end, center);
  .login-panel {
    position: fixed;
    right: 50px;
    top: 15%;
    border-radius: 5px !important;
    @include flexMixer(center, center, column);
    overflow: hidden;
    .title {
      font-size: 45px;
      margin: 10px 0px;
    }
    float: right;
    background: $secord-color;
    opacity: 0.9;
    box-shadow: 1px 1px 5px $secord-color;
    padding: 30px;
    color: white;
    font-size: 30px;
    font-weight: bold;
    .form {
      width: 100%;
      margin-top: 40px;
      :deep(.ant-form-item-label > label) {
        color: white !important;
      }
      :deep(.ant-checkbox-wrapper) {
        color: white !important;
      }
    }
  }
  img {
    cursor: pointer;
    position: relative;
    left: 300px;
    top: -195px;
    height: 50px;
  }
  :deep(.ant-form) {
    width: 500px;
  }
  :deep(.ant-form-item) {
    line-height: 5px !important;
  }
  :deep(.ant-btn-primary) {
    width: 120px;
    height: 40px;
    font-size: 20px;
  }
  :deep(.ant-input) {
    height: 50px !important;
  }
  :deep(.ant-form-item-label > label) {
    font-size: 20px;
    height: 50px;
  }
  :deep(#basic_password) {
    height: 40px !important;
  }
  :deep(.ant-checkbox-wrapper) {
    font-size: 18px;
    margin-top: 15px;
  }
  :deep(.ant-input) {
    font-size: 18px;
  }
}
.bg {
  overflow: hidden;
  position: absolute;
  z-index: 1;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  video {
    width: 100%;
    height: 100%;
    object-fit: fill;
    opacity: 0.7;
  }
}
:deep(#basic_captcha) {
  width: 50%;
}
</style>
